import React, { useEffect } from "react"
import { Image, View } from "@tarojs/components"
import Taro, { usePullDownRefresh, useReachBottom } from "@tarojs/taro"
import { useSetState } from "@/utils/hooks"
import GpContainer from "@/components/GpContainer"
import clsx from "clsx"
import styles from "./index.module.scss"
import { getMyFans, switchConcern } from "@/apis/yikao-community"
import { requestIsFullfilled } from "@/utils/request"
import GpEmpty from "@/components/GpEmpty"

type IState = {
  list: IApiRelative.IGetMyFans.IGetMyFansItem[]
  current: number
  hasMore: boolean
}
/**
 * @page 我的粉丝
 */
const MyFans: React.FC = function () {
  const [state, setState, stateRef] = useSetState<IState>(
    {
      list: [],
      hasMore: true,
      current: 1
    },
    true
  )
  useEffect(() => {
    fetchMyFans()
  }, [])
  useReachBottom(() => {
    if (stateRef.current!.hasMore) {
      setState({
        current: stateRef.current!.current + 1
      })
      fetchMyFans()
    }
  })
  usePullDownRefresh(() => {
    setState({
      current: 1
    })
    fetchMyFans()
    Taro.stopPullDownRefresh()
  })
  function fetchMyFans() {
    Taro.showLoading({
      title: "加载中..."
    })
    getMyFans({
      pagination: {
        current: stateRef.current!.current,
        pageSize: 10
      },
      sort: {
        predicate: "",
        reverse: false
      },
      search: {}
    })
      .then(res => {
        Taro.hideLoading()
        if (requestIsFullfilled(res)) {
          const { list, pagination } = res.data.data
          setState({
            list: pagination.current === 1 ? list : [...stateRef.current!.list, ...list],
            hasMore: pagination.current < pagination.pageCount
          })
        }
      })
      .catch(() => {
        Taro.hideLoading()
      })
  }
  function handleConcern(fans: IApiRelative.IGetMyFans.IGetMyFansItem) {
    if (fans.isMutual) {
      Taro.showModal({
        content: "确认不再关注该账号?",
        success({ confirm }) {
          if (confirm) {
            switchConcernAction(fans)
          }
        }
      })
    } else {
      switchConcernAction(fans)
    }
  }
  function switchConcernAction(fans: IApiRelative.IGetMyFans.IGetMyFansItem) {
    switchConcern({ followingMiniVisitorId: fans.followerMiniVisitorId }).then(res => {
      if (requestIsFullfilled(res)) {
        const _list = stateRef.current!.list.concat()
        const finder = _list.find(l => l.followerMiniVisitorId === fans.followerMiniVisitorId)
        if (finder) {
          finder.isMutual = !finder.isMutual
          setState({ list: _list })
        }
      }
    })
  }
  function renderEmpty() {
    return (
      <GpEmpty
        imageProps={{
          src: "https://static.91goodschool.com/UpFiles/public/yikao/image/xinxiang.png",
          style: {
            width: 126,
            height: 112
          }
        }}
        emptyProps={{
          style: {
            paddingTop: 120
          }
        }}
        description="还没有用户关注你哦"
      />
    )
  }
  return (
    <GpContainer className="min-h-screen">
      <View className={styles.list}>
        {state.list.length > 0
          ? state.list.map(l => (
              <View className={styles.item} key={l.followerMiniVisitorId}>
                <Image
                  src={l.followerMiniVisitorHead || process.env.__DEF_AVATAR__}
                  className={styles.image}
                />
                <View className={styles.info}>
                  <View className={styles.name}>{l.followerMiniVisitorName}</View>
                  <View className={styles.desc}>{l.followerMiniVisitorDescription}</View>
                </View>
                <View
                  className={clsx(styles.concernBtn, {
                    [styles.huiguan]: !l.isMutual
                  })}
                  onClick={() => handleConcern(l)}
                >
                  {l.isMutual ? "互相关注" : "回关"}
                </View>
              </View>
            ))
          : renderEmpty()}
      </View>
    </GpContainer>
  )
}
export default MyFans
